<template>
	<div class="footer-nav" v-if="showNavBar">
		<van-tabbar 
			inactive-color="#999"
			v-model="activePage" 
			fixed
			:z-index=10 
			safe-area-inset-botton
			@change="tab"
		>
			<van-tabbar-item name="index" :class="activePage == 'index' && 'c-main'">
				<van-icon slot="icon" class-prefix="ucai-icon" :name="'caigouzhongxin' + (activePage == 'index' ? '_on' : '')"/>
				采购中心
			</van-tabbar-item>
			<van-tabbar-item name="message" :class="activePage == 'message' && 'c-main'" :info="unread > 0 ? unread :''">
				<van-icon slot="icon" class-prefix="ucai-icon" :name="'xiaoxizhongxin' + (activePage == 'message' ? '_on' : '')"/>
				消息
			</van-tabbar-item>
			<van-tabbar-item name="kefu" :class="activePage == 'kefu' && 'c-main'">
				<van-icon slot="icon" class-prefix="ucai-icon" :name="'kefuzhongxin' + (activePage == 'kefu' ? '_on' : '')"/>
				客服
			</van-tabbar-item>
			<van-tabbar-item name="profile" :class="activePage == 'profile' && 'c-main'">
				<van-icon slot="icon" class-prefix="ucai-icon" :name="'wodezhongxin' + (activePage == 'profile' ? '_on' : '')"/>
				我的
			</van-tabbar-item>
		</van-tabbar>
		
		<kefu-popup ref="kefuInfo" @cancle="cancle"/>
	</div>
</template>
<script>
	import { 
		Tabbar, 
		TabbarItem, 
		Icon, 
	} from 'vant';
	import Kefu from '@cmpt/popup/kefu'
	import { getMsgUnreadNum } from '@/api/modules/message';
	
	import { getRole } from '@utils/role'
  import {
    isLogin,
	} from '@utils/storage_base_config'

	export default {
		name: 'footer-nav',
		data (){
			return {
				activePage: this.page,
				unreadNum: '',
				unread: 0,
				showNavBar: !(this.$is_from_app) && getRole() !== '0', // 是否展示底部导航。app和游客隐藏
			}
		},
		props: {
			page: String,
		},
		components: {
			[Icon.name]: Icon,
			[Tabbar.name]: Tabbar,
			[TabbarItem.name]: TabbarItem,
			[Kefu.name]: Kefu
		},
		mounted() {
			this.getUnreadMsgNum()
		},
		methods: {
			tab (val) {
				if(val === 'kefu'){
					this.$refs.kefuInfo.init()
				}else{
					this.$goPage(val)
				}
			},
			 cancle() {
      	this.activePage = this.page;
			 },
			// 获取未读消息数量
			 getUnreadMsgNum () {
					getMsgUnreadNum().then(res => {
						if(Number(res.data.total) > 0){
							this.unread = String(res.data.total)
							this.$emit('unreadNum', this.unread)
						}
					})
			 }
		}
	}
</script>
<style lang="less" scoped>
	@import "~@style_m/basic/utils/index";
	.footer-nav .van-tabbar {
		border-top: @border-default;
		.van-tabbar-item {
			font-size: 10px;
			.ucai-icon {
				font-size: 22px;
			}
		}
	}
	
</style>